<template>
  <div class="devList">
    <div class="top">
      <div class="arrow" @click="arrow">
        <img src="../../src/assets/arrow1.png" alt="" />
      </div>
      <div class="header">
        <p>设备列表</p>
      </div>
      <div class="dianliang"></div>
    </div>
		<van-tabs class="tabList" color="white" background="#7057FA" v-model="activeName">
			<van-tab title="紧急求救" name="sos">
				<van-list
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
				>
					<van-cell >
            <table class="table" border="1">
              <tr class="head">
                <th class="title">设备名称</th>
                <th class="title">安装位置</th>
                <th class="title">状态</th>
              </tr>
              <tr class="content" v-for="(item,index) in sosDeviceInfoAlarmItems" :key="index">
                <td>{{ item.createdBy }}</td>
                <td>{{ item.aMessagetype }}</td>
                <td>{{ item.aSericeid }}</td>
              </tr>
            </table>
          </van-cell>
				</van-list>
				<div class="device-bottom">
					<!-- <div class="edit">编辑</div> -->
					<div class="add" @click="gotoAddDevice('sosT')">添加设备</div>
				</div>
			</van-tab>
			<van-tab title="红外探测" name="red">
        <van-list
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
				>
					<van-cell >
            <table class="table" border="1">
              <tr class="head">
                <th class="title">设备名称</th>
                <th class="title">安装位置</th>
                <th class="title">状态</th>
              </tr>
              <tr class="content" v-for="(item,index) in redDeviceInfoAlarmItems" :key="index">
                <td>{{ item.createdBy }}</td>
                <td>{{ item.aMessagetype }}</td>
                <td>{{ item.aSericeid }}</td>
              </tr>
            </table>
          </van-cell>
				</van-list>
				<div class="device-bottom">
					<!-- <div class="edit">编辑</div> -->
					<div class="add" @click="gotoAddDevice('redT')">添加探测设备</div>
				</div>
      </van-tab>
      <van-tab title="烟雾报警" name="fire">
        <van-list
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
				>
					<van-cell >
            <table class="table" border="1">
              <tr class="head">
                <th class="title">设备名称</th>
                <th class="title">安装位置</th>
                <th class="title">状态</th>
              </tr>
              <tr class="content" v-for="item in fireList" :key="item">
                <td>{{ item }}</td>
                <td>{{ item }}</td>
                <td>{{ item }}</td>
              </tr>
            </table>
          </van-cell>
				</van-list>
				<div class="device-bottom">
					<!-- <div class="edit">编辑</div> -->
					<div class="add" @click="gotoAddDevice('fireT')">添加探测设备</div>
				</div>
      </van-tab>
		</van-tabs>
  </div>
</template>

<script>
import router from '@/router';
import { mapState , mapActions} from 'vuex';
export default {
  name: "devicelist",
  data() {
    return {
      activeName:'red',
			sosList: ['去','我','额','人','是','发','给','下','吧','你'],
      redList:['s','asd','asd','sdfwe','xcvse0','xcvse'],
      fireList:['青蛙似的','胜多负少','梵蒂冈的','热水','山地车v下','含有人体','啊撒旦'],
      loading: false,
      finished: true,
		};
  },
  methods: {
    ...mapActions('systick',['actionTicketsList','actionTickTop','actionShebeiList']),
		onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    arrow() {
			// console.log('asdasd')
      router.go(-1);
    },
    gotoAddDevice(type){
      router.push(`/addDevice/${type}`)
    }
  },
  computed:{
    ...mapState('systick',['ticketsList','ticketsListTop','sosDeviceInfo','redDeviceInfo','sosDeviceInfoAlarmItems','redDeviceInfoAlarmItems']),
    // ...mapGetters('systicks',['sosDeviceInfoAlarmItems','redDeviceInfoAlarmItems'])
  },
  mounted(){
    this.actionShebeiList()
    this.activeName=this.$route.params.type
  }
};
</script>
<style lang='scss' scoped>
@import "./devicelist.scss";
</style>